<template>
    <div>  
	    <van-popup v-model="showPopup" style="border-radius: 2px;">
	    	<div class="wrap">
				<div class="a">
					<div class="b">
					  <div class="c">
					  	<div class="d">
					  		<div class="e"></div>
					  	</div>
					  	<div class="d">
					  		<div class="e"></div>
					  	</div>
					  	<div class="d">
					  		<div class="e"></div>
					  	</div>
					  </div>	
			          <van-area :area-list="areaList"  :value="areaValue"
                          ref='area'>
			          </van-area>			
					</div>   
				</div>
	             <div class='bottom'>
	             	<span class="bottom_span" @click="showPopup=false">取消</span>
	             	<span class="bottom_span" @click="query">确认</span>
	             </div>				
			</div>
	    </van-popup>
    </div>
</template>
<script>
import '@/assets/reset/reset.css'	
import areaList from '@/api/area.js'	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	name:'showArea',
	data() {
       return {
       	 showPopup:false,
         areaList:areaList
       }
	},
	props:{
	  areaValue:{
	    type: String	  	
	  }	
	},
	methods: {	
		show(){
		  this.showPopup=true
		},
		query(){
		  
		  this.showPopup=false	
		  this.$emit('query',this.$refs.area.getValues())
		}
	},
	mixins:[publicFun],//混入		
	mounted() {
	}
}	
</script>

<style scoped="">
*{box-sizing: border-box;}	
.wrap{width: 300px;background: #fff;border-radius: 6px;}
.a{padding: 0 35px;}
.b{position: relative;}
.c{position: absolute;height: 44px;top: 50%;z-index: 3;width: 100%;    transform: translateY(-50%);display: flex;}
.d{flex: 1;padding: 0 5px;}
.e{border-top: 1px solid #FFD630;border-bottom: 1px solid #FFD630;height: 100%;}
.bottom{display: flex;}
.bottom_span{flex: 1;text-align: center;padding: 15px 0;font-size: 16px;}
</style>